import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { history } from 'umi';
import { Tabs, Tree, Input, Button, Spin, Table, Radio, message } from 'antd';
import ColumnCollapse from '@/components/ColumnCollapse';
import CustomDatePicker from '@/components/CustomDatePicker';
import Loading from '@/components/Loading';
import { downloadExcel } from '@/utils/array';
import XLSX from 'xlsx';
import style from '@/pages/IndexPage.css';
const { Search } = Input;

function RunningReport({ dispatch, user, mach }){
    const { authorized } = user;
    const { runningInfo, machTreeData, machList, currentMach, currentPage, total, isLoading } = mach;
    useEffect(()=>{
        if ( authorized ) {
            async function init(){
                await dispatch({ type:'mach/fetchMachList' }); 
                dispatch({ type:'mach/fetchRunningReport'});
            }
            init();
        }
    },[authorized])
    
    const sidebar = (
        <div className={style['card-container']}>
            <div className={style['card-title']}>设备选择</div>
            <div className={style['card-content']}>
                { 
                    isLoading 
                    ?
                    <Spin />
                    :
                    <Tree
                        className={style['custom-tree']}
                        // expandedKeys={expandedKeys}
                        defaultExpandAll
                        // onExpand={temp=>{
                        //     dispatch({ type:'fields/setExpandedKeys', payload:temp });
                        // }}
                        showLine
                        selectedKeys={[currentMach.key]}
                        treeData={machTreeData}
                        onSelect={(selectedKeys, { node })=>{
                            message.info('等真实数据上线再切换...');
                            // dispatch({type:'fields/setCurrentAttr', payload:node });
                            // dispatch({ type:'cost/fetchCostReport' });
                        }}
                    />
                }  
            </div>
        </div>
    );
   
    const content = (     
        <div style={{ height:'100%', position:'relative' }}>
            { isLoading && <Loading /> }
            <div style={{ height:'40px', display:'flex', justifyContent:'space-between' }}>
                <div style={{ display:'flex' }}>
        
                    <CustomDatePicker onDispatch={()=>dispatch({ type:'mach/fetchRunningReport' })} />
                </div>
                <Button type='primary' onClick={()=>{
                    // if ( costData.length ) {
                    //     // 请求全部数据源
                    //     new Promise((resolve, reject)=>{
                    //         dispatch({ type:'cost/fetchCostReport', payload:{ resolve, reject, pageSize:9999 }})
                    //     })
                    //     .then((data)=>{
                    //         let fileTitle = '成本报表';
                    //         var aoa = [], thead = [];
                    //         columns.forEach(i=>thead.push(i.title));
                    //         aoa.push(thead);
                    //         data.forEach((item,index)=>{
                    //             let temp = [];
                    //             temp.push(index + 1);
                    //             temp.push(item.attrName);
                    //             temp.push(energyInfo.typeName || '');
                    //             temp.push(energyInfo.unit || '');
                    //             temp.push(item.totalCost);
                    //             dateColumns.forEach((time, i)=>{
                    //                 temp.push(item.dateDataList[i] || '--');
                    //             })                       
                    //             aoa.push(temp);
                    //         });
                    //         var sheet = XLSX.utils.aoa_to_sheet(aoa);
                    //         sheet['!cols'] = thead.map(i=>({ wch:16 }));
                    //         downloadExcel(sheet, fileTitle + '.xlsx' );                         
                    //     })
                        
                    // } else {
                    //     message.info('数据源为空');
                    // }
                }}>导出报表</Button>
            </div>
            <div className={style['card-container']} style={{ height:'calc( 100% - 40px)'}}>
                <Table
                    dataSource={runningInfo.tableData || []}
                    bordered={true}
                    rowKey=''
                    className={style['self-table-container']}
                    columns={runningInfo.columns || []}
                    scroll={{ x:'1000px' }}
                    locale={{ emptyText:(<div style={{ margin:'1rem 0'}}>数据源为空</div>) }}
                    pagination={{ total, current:currentPage, pageSize:12, showSizeChanger:false  }}
                    onChange={pagination=>{
                        dispatch({ type:'cost/fetchCostReport', payload:{ currentPage:pagination.current }})
                    }}
                />
            </div>
        </div>
    );
   
    return <ColumnCollapse sidebar={sidebar} content={content} />
}

export default connect(({ user, mach })=>({ user, mach }))(RunningReport);